<template>
  <div
    class="composite-title"
  >
    <VHtml
      tag="h2"
      class="composite-title-content"
      :html="mainQuestionContent"
    />
    <img
      class="arrow imgNotPreview"
      :src="sepLine"
    >
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { AppInfo } from '@/lib/appMethods'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  props: {
    mainQuestionContent: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      // sepLine: AppInfo.isApp ? require('assets/exam/question_dividing_line.png')
      //   : require('assets/exam/test_sep_web.png'),
      sepLine: require('assets/exam/test_sep_web.png'),
    }
  },
})
</script>

<style lang="scss" scoped>
.composite-title {
  margin: 30px 40px 0;
  font-size: 32px;
}
.composite-title-content {
  font-size: 30px;
  color: #666;
  text-align: left;
  word-wrap: break-word;
  word-break: break-all;
  /deep/ img {
    max-width: 100%;
    margin-top: 30px;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.arrow {
  max-width: 100%;
  margin-top: 50px;
  // margin-bottom: 20px;
}
</style>
